.page{
    width:100%;
    height:100vh;
    background-image: linear-gradient(to bottom,rgba(8, 21, 77, 1), rgba(8, 21, 77, 1));
    color:#fff;
    .page-view{
        background:url(./img/bg.png) no-repeat center bottom;
        background-size:100% 100%; 
    }
}
.page-header{
    height:103px;
    position:relative;
    .header-left-box{
        position:absolute;
        left:20px;
        bottom:30px;
        .weather{
            margin-left:80px;
        }        
    }
    .header-right-box{
        position:absolute;
        right:20px;
        bottom:30px;
        .hh-ii-ss{
            margin-right:80px;
        }
    }
}

.module-box{
    padding-bottom:20px;
    .module-title{
        position:relative;
        font-size:24px;
        color:#F9FAFD;
        height:40px;
        line-height:40px;
        font-weight:bold;
        padding-left:36px;
        background:url(./img/title-bg.png) no-repeat;
        // background-image: radial-gradient(rgba(29,137,232,.7), rgba(29,137,232,.5) 30%, rgba(29,137,232,0) 80%), linear-gradient(90deg, rgba(29,137,232,0) 15%, rgba(29,137,232,.3) 40%, rgba(29,137,232,.3) 60%, rgba(29,137,232,0) 85%);
        background-size:auto 100%;
    }
    .module-content{
        position:relative;
        background: linear-gradient(0deg, rgba(29,80,195,0.3) 0%, rgba(29,80,195,0) 100%);
    }
}

.page-content{
    position:relative;
    padding:37px 20px 0 20px;
    // 1880*937
}
.page-left-box{
    position:relative;
}
.page-center-box{
    position:relative;
    margin:0 30px;
    .map-box{
        position:relative;
        width:920px;
        height:682px;
        background:url(./img/map.png) no-repeat center center;
        background-size:auto 100%;
        .item-name{
            position:absolute;
            // width:0;
            // height:0;
            pointer-events: none;
        }
        .map-mark{
            cursor: pointer;
            width:0;
            position:absolute;
            transform: translateX(-50%) translateY(-100%);
        }
        /* @keyframes rotate{
            0%  {transform:translateY(-30) translateX(-30px) rotate(-20deg); opacity:0;}
            33.3%   {transform:translateY(-30px) translateX(-30px) rotate(-20deg); opacity:0;}
            34%   {transform:translateY(-30px) translateX(-30px) rotate(-20deg); opacity:1;}
            36%   {transform:translateY(0px) translateX(-30px) rotate(-10deg); opacity:1;}
            38%   {transform:translateY(-15px) translateX(-15px) rotate(0deg); opacity:1;}
            40%   {transform:translateY(0px) translateX(0px) rotate(0deg); opacity:1;}
            66%   {transform:translateY(0px) translateX(0px) rotate(0deg); opacity:1;}
            66.6%   {transform:translateY(0px) translateX(0px) rotate(20deg); opacity:0;}
            100% {transform:translateY(-30px) translateX(-30px) rotate(0deg); opacity:0;}
        } */
        @keyframes scala{
            0% {transform:translateX(-50%) scale(.94);}
            100% {transform:translateX(-50%) scale(1.04);}
        }
        .map-mark-title{
            color:#fff;
            min-width:100px;
            // height:40px;
            white-space: nowrap;
            // padding:0 20px;
            font-size:14px;
            // text-align:center;
            // line-height:70px;
            background:url(./img/ditibiaoqian.png) no-repeat center top;
            background-size:100% 100%;
            letter-spacing: 0px;
            overflow:hidden;
            position:absolute;
            left:50%;
            bottom:110px;
            transform: translateX(-50%);
            // animation: scala .6s linear infinite alternate;
        }
        @keyframes stretch{
            0% {height:20px; width:0;}
            25% {height:106px; width:6px;}
            75% {height:106px; width:6px;}
            100% {height:20px; width:0;}
        }
        .map-mark-icon-1{
            position:absolute;
            left:50%;
            bottom:0;
            transform: translateX(-50%);
            z-index:1;
            width: 0;
            height: 0;
            /* border-radius:6px 6px 0 0; */
            /* box-shadow: 0 -20px 20px 0 #19FEB044; */
            background-image: linear-gradient(0deg, rgba(28,235,254,1) 0%, rgba(28,235,254,0) 100%);
            animation: stretch 4s linear infinite;
        
        }
        @keyframes scala_1{
            0%   {box-shadow: 0 0 0 0 #1cebfe66, 0 0 0 10px #1cebfe66, 0 0 0 30px #1cebfe33;}
            100% {box-shadow: 0 0 0 10px #1cebfe66, 0 0 0 30px #1cebfe33, 0 0 0 30px #1cebfe00;}
        }
        .map-mark-icon-2{
            width:20px;
            height:20px;
            border-radius:50%;
            transform:translateX(-50%) translateY(50%) rotateX(-60deg) scale(1);
            position:absolute;
            left:50%;
            bottom:0;
            background-color:#1cebfe;  
            animation: scala_1 2s linear infinite;
        }
        .map-mark:hover .map-mark-title{
            // color:#ff0;
        }
        .map_mark_select{
            z-index:2;
        }
        .map_mark_select .map-mark-title{
            background-image:url(./img/xuanzhongditubiaoqian.png);
            // height:70px;
        }
        .map_mark_select .map-mark-icon{
            /* background-image: linear-gradient(0deg, #43d8e1 0%, #46c3f7 100%); */
        }
    
        .content-wrapper-a{
            display:grid;
            grid-template-rows: 0fr;
            transition: all .5s;
            .content-wrapper-b{
                overflow:hidden;
            }
        }
        .map-mark:hover {
            .content-wrapper-a{
                grid-template-rows: 1fr;
            }
        }
    }
}

.zczgtj{
    .list-data-info{
        margin-top:20px;
        background:url(./img/l.png) no-repeat 10px center,url(./img/m.png) no-repeat center center,url(./img/r.png) no-repeat calc(100% - 10px) center;
        background-size:auto 57.57%, auto 100%, auto 57.57%;
        height:66px;
        padding:0 36px;
        .data-info{
            .label{
                font-size:14px;
                color:#fff;
                margin-right:15px;
            }
            .value{
                font-size: 24px;
                font-weight: bold;
                color:rgba(88, 233, 255, 1);
            }
        }
        .data-info:nth-of-type(2n+2){
            .value{
                font-size: 24px;
                font-weight: bold;
                color:rgba(255, 177, 60, 1);
            }
        }
    }
    .echart{
        background:url(./img/zczg-bg2.png) no-repeat center 60px;
        background-size:298px auto;
    }
}

.zfbtntj{
    .list{
        padding:10px 0;
    }
    .list-item{
        padding:10px;
    }
    .icon-wrapper{
        margin-right:10px;
        .icon{
            width:58px;
            vertical-align: middle;
        }
    }
    .label{
        color:#C1DDFF;
        line-height:32px;
    }
    .progress-icon{
        width: 100%;
        height: 1px;
        border: 1px solid rgba(34, 253, 250, .3);
        position:relative;
    }
    .progress-icon::before,
    .progress-icon::after{
        content:"";
        display:block;
        width: 6px;
        height: 6px;
        background: #3690B2;
        position:absolute;
        top:50%;
        transform: translateY(-50%);
    }
    .progress-icon::before{
        left:0;
    }
    .progress-icon::after{
        right:0;
    }
    .progress-bar-box{
        margin-top:12px;
        width:100%;
        height:12px;
        background-image: 
            linear-gradient(135deg,  rgba(0,0,0,0) 40%, rgba(34, 253, 250, .3) 40%, rgba(34, 253, 250, .3) 60%, rgba(0,0,0,0) 60%)
        ;
        background-repeat: 
            repeat
        ;
        background-size:
            5px 5px
        ;
        background-position:
            -3px -1px
        ;
        .progress-bar{
            width:0;
            height:inherit;
            background-image: 
                linear-gradient(135deg,  rgba(0,0,0,0) 40%, rgba(34, 253, 250, 1) 40%, rgba(34, 253, 250, 1) 60%, rgba(0,0,0,0) 60%)
            ;
            background-repeat: inherit;
            background-size:inherit;
            background-position:inherit;
        }
    }
    .progress-icon2{
        border: 1px solid rgba(255, 177, 60, .3);
    }
    .progress-icon2::before,
    .progress-icon2::after{
        background: rgba(255, 177, 60, 1);
    }
    .progress-bar-box2{
        background-image: 
            linear-gradient(135deg,  rgba(0,0,0,0) 40%, rgba(255, 177, 60, .3) 40%, rgba(255, 177, 60, .3) 60%, rgba(0,0,0,0) 60%)
        ;
        .progress-bar{
            background-image: 
                linear-gradient(135deg,  rgba(0,0,0,0) 40%, rgba(255, 177, 60, 1) 40%, rgba(255, 177, 60, 1) 60%, rgba(0,0,0,0) 60%)
            ;
        }
    }
    .value{
        margin-left:20px;
        font-size: 20px;
        font-weight: bold;
        color: #22FDFA;
    }
}

.total-box{
    max-width:920px;
    margin:0 auto;
    .total-item{
        min-width:185px;
        background:url(./img/mi-date-bg.png) no-repeat left bottom;
        background-size:100% 30px;
        padding:0 15px;
        .label{
            font-size:18px;
            color:#fff;
        }
        .icon{
            width:14px;
            margin-right:10px;
        }
        .value{
            // background:url(./img/);
            font-size: 30px;
            font-weight: bold;
            background: linear-gradient(0deg, #58E9FF 0%, #D5F4F9 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
    }
}

.zxscqk{
    .module-content{
        padding-top:17px;
        background:rgba(0,0,0,0);
    }
    .list{
        margin-left:-6.5px;
        margin-right:-6.5px;
        height:100%;
        .list-item{
            width:25%;
            height:100%;
            padding:0 6.5px;
            .list-item-wrapper{
                width:100%;
                height:100%;
                background-color:rgba(29, 80, 195, .3);
                .list-header{
                    background-color:inherit;
                    width:100%;
                    height:40px;
                    line-height:40px;
                    padding:0 12px;
                    font-size:14px;
                    color: #58E9FF;
                }
                .list-data-info{
                    margin-top:7px;
                    padding:0 12px;
                    font-size:14px;
                    color:rgba(255, 255, 255, .8);
                }
            }
        }
    }
}
.ddhztj{
    .list{
        padding:2% 0;
        .list-item{
            padding-left:20px;
            .icon{
                width:42px;
                margin-right:10px;
            }
            .value{
                font-size: 24px;
                font-weight: bold;
                color:rgba(88, 233, 255, 1);
                height:27px;
            }
            .label{
                margin-top:4px;
                font-size:14px;
                color:#fff;
            }
        }
    }
}
.zcfltj{
    .module-content{
        .module-content-header{
            background: url(./img/zcfltj-bg.png) no-repeat center center;
            .yd,
            .ts{
                padding-left:36px;
                .icon{
                    width:44px;
                    margin-right:10px;
                }
                .value{
                    font-size: 24px;
                    font-weight: bold;
                    color:rgba(88, 233, 255, 1);
                    height:27px;
                }
                .label{
                    margin-top:4px;
                    font-size:14px;
                    color:#fff;
                }
            }
        }
    }
}